<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渲染列表</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
    <!-- 引入babel，将JSX翻译成JS代码，需要在script标签中设置type：text -->
    <!-- /babel -->
    <script src="script/babel.min.js"></script>
  </head>

  <body>
    <div id="root"></div>

    <script type="text/babel">
      const data = ["xzl", "ydd", "jdy"];

      const list = (
        <ul>
          {data.map((item) => (
            <li>{item}</li>
          ))}
        </ul>
      );

      const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(list);

      /**
       * 虚拟DOM
       *    虚拟DOM的好处：
       *        1. 降低API复杂度
       *        2. 解决兼容问题
       *        3. 提升性能（减少DOM的不必要的操作）
       * 
       * 当调用render()时，页面会发生重新渲染
       *    React通过diff算法，将新旧元素进行比较，通过比较，对页面做最少量更新
       * 
       * React为列表设计了key属性
       *    React中列表默认是按照顺序来进行比较元素的
       *    当设置key以后，比较元素时，就会比较相同key的元素，而不是按照顺序进行比较
       *        key需要在当前列表中唯一
       */
    </script>
  </body>
</html>
